<template>
	<view class="page" v-if="forecast.data">
		<view class="nav dp-flex-center">
			{{forecast.city}}市
		</view>
		<view class="" style="font-weight: bold;">
			<view class="dp-flex-center wt-temp" style="margin-top: 140rpx;">

				<text style="font-size: 200rpx">
					{{forecast.data[current].tem}}
				</text>
				℃
			</view>
			<view class="dp-flex-center" style="margin-top: 60rpx;">
				<text>
					{{forecast.data[current].wea}}
				</text>
			</view>
		</view>
		<view class="dp-flex-around">
			<view class="wt-info">
				<image src="/static/icon-fengxiang.png" mode=""></image>
				{{forecast.data[current].win[0]}}
			</view>
			<view class="wt-info">
				<image src="/static/icon-fengsu.png" mode=""></image>
				{{forecast.data[current].win_meter}}
			</view>
			<view class="wt-info">
				<image src="/static/icon-shidu.png" mode=""></image>
				{{forecast.data[current].humidity}}
			</view>
		</view>
		<view class="wt-all" style="">
			<view v-if="forecast.data.length>0" @click="current=i" :class="{'item-act':current==i}"
				class="dp-flex-between wt-all-item" v-for="(item,i) in forecast.data">
				<view class="">
					{{i==0?'今天':item.week.replace('星期','周')}}
				</view>
				<view class="">
					{{item.wea}}
				</view>
				<view class="">
					{{item.tem2}}°~{{item.tem1}}°
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				forecast: {},
				current: 0
			};
		},
		mounted() {
			uni.showLoading()
			this.getWeather().then(data => {
				this.forecast = data
				uni.hideLoading()
			})

		},
		methods: {
			getWeather() {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://www.tianqiapi.com/api/',
						data: {
							//  天气预报api注册： https://www.tianqiapi.com/user/login
							appid: '24717439', //需要去提供api官方注册得到appid
							appsecret: 'oaPmww7d ', //需要去提供api官方注册得到appsecret
							version: 'v9', //版本号
						},
						success: ({
							data
						}) => {
							resolve(data)
						},
						fail: function(info) {
							reject(info)
							//失败回调
							console.log(info)
						}
					})
				})
			}

		}
	}
</script>

<style lang="scss">
	.nav{
		font-size: 38rpx;
		height: 100rpx;
	}
	.dp-flex-around {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	
	.dp-flex-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.dp-flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page {
		height: 100vh;
		background: linear-gradient(15deg, #0F65DB, #0A8FEC, #0AC4EC);
		color: #FFFFFF;
	}

	.wt-info {
		margin-top: 160rpx;
		display: flex;
		align-items: center;

		image {
			width: 42rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
	}

	.wt-temp {
		line-height: 1;
		align-items: stretch;
	}

	.wt-all {
		box-sizing: border-box;
		margin-top: 80rpx;
		width: 100%;
		padding: 76rpx 42rpx;
		background-color: #FFFFFF;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;
		color: #666666;
	}

	.wt-all-item:not(:last-child) {
		margin-bottom: 70rpx;
	}

	.item-act {
		color: #017EFF;
	}
</style>
